﻿<%@page import="com.cchr.acms.util.HtmlComponentUtil.SelectOption"%>
<%@page import="java.util.List"%>
<%@page import="com.cchr.acms.util.HtmlComponentUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<%
	String contextPath = request.getContextPath();
%>
<link href="<%=request.getContextPath()%>/assets/stylesheets/jquery.dataTables.css" rel="stylesheet" />
<style> 
	.dataTables_wrapper .dataTables_paginate .paginate_button{
		padding: 0px
	}
    .black_overlay{ 
        z-index:999; 
        display:none; 
        position:fixed;
        width:100%;
        height:100%;
        left:0;top:0; 
        background-color:Black;
        opacity: 0.5;
    } 
    .white_content { 
        display: none; 
        position: absolute; 
        top: 10%; 
        left: 15%; 
        width: 60%; 
        height: 80%; 
        padding: 20px; 
        border: 1px solid blue; 
        background-color: white; 
        z-index:1002; 
        overflow: auto; 
    } 

	<!--
	#jq-datatables-example_wrapper .table-header{
		display: none;
	}
	-->
</style>
	<!--show list-->
	<div class="row">
			<div class="col-sm-12">
				<div id="searchAreaDiv1" class="panel">
					 <!--search conditions-->
					<div class="row">
						<div class="col-sm-12">
						<form class="form-horizontal " role="form" method="post" id="userList" >
							<div  id="searchAreaDiv"  class="panel-body" style="padding:20px">
								<div class="row">
									<div class="col-sm-4">
										<div class="form-group">
											<label  class="col-sm-5 control-label">Chapter:</label>
											<div class="col-sm-7">
												<!-- <input type="text" class="form-control" name="chapter.chapter" id="sys_chpater"> -->
												<input type="text" class="form-control" name=chapter.chapter id="s_chapter">
											</div> 
										</div>
									</div>
									<div class="col-sm-4 ">
										<a class="btn btn-primary" id="searchBtn" style="border-radius:0px; width:110px">Search</a>&nbsp;&nbsp;
									</div>
								</div>
								
							</div>

							</div>
						</form>
						</div>

					</div>
					
					<div class="row">
						<div class="col-sm-12">
							 <!--    <div class="col-sm-4" style="padding-left:0px;padding-bottom:10px">
									<a class="btn btn-primary" id="addBtn" style="border-radius:7px;width:110px" onClick="addUser();return false;">&nbsp;Add&nbsp;</a>
									
									<a class="btn btn-primary" id="addBtn" style="border-radius:15px;width:80px" onClick="editUser();return false;">&nbsp;Edit&nbsp;</a>
									
									<a class="btn btn-primary" id="addBtn" style="border-radius:7px;width:110px" onClick="deleteUser();return false;">Remove</a>
								</div> -->
								<div class="table table-primary">
									<table cellpadding="0" cellspacing="0" border="0" class="table table-bordered display" style="width:100%" id="jq-datatables-example">
										<thead>
											<tr>
											    <th>Country</th>
												<th>States/Province</th>
												<th>City</th>
												<th>Chapter</th>
											</tr>
										</thead>
									</table>
								</div>
						</div>
					</div>
				</div><!-- / #panel -->
		</div><!-- / #row -->
		
		<!--增加chapter -->
		<div id="myModal" class="modal fade">
			<div class="modal-dialog"  style="width:800px">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">Add Chapter</h4>
					</div>
					<div class="modal-body" style="margin-top:20px" >
						<form id="jq-validation-form" method="POST">
							<div class="row">
								<div class="col-sm-6">
									<div class="form-group no-margin-hr">
										<label class="control-label">Country</label>
										<%= HtmlComponentUtil.getSelect("chCountry", "country", (List<SelectOption>)request.getAttribute("countryDatas"), "United States", "Choose Country...") %>
					                	</select>
									</div>
								</div>
								<div class="col-sm-6">
									<div class="form-group no-margin-hr">
										<label class="control-label">State/Provice</label>
										<input type="text" class="form-control" name="states" id="chStates">
					                	</select>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-6">
									<div class="form-group no-margin-hr">
										<label class="control-label">City</label>
										<input type="text" class="form-control" name="city" id="chCity">
									</div>
								</div>
								<div class="col-sm-6">
									<div class="form-group no-margin-hr">
										<label class="control-label">Chapter Name</label>
										<input type="text" class="form-control" name="chapter" id="chapter" placeholder="Chapter Name...">
									</div>
								</div>
							</div>
							<input type="hidden" name="id" id="chId">
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" style="border-radius:0px; width:110px;" onClick="closeDiv();return false;">Cancel</button>
						<button type="button" class="btn btn-primary" id="addBtn" style="border-radius:0px; width:110px;" onClick="saveChapter();return false;">Save</button>
					</div>
				</div> <!-- / .modal-content -->
			</div> <!-- / .modal-dialog -->
		</div> <!-- / .modal -->

				<div id="uidemo-modals-alerts-success" class="modal modal-alert modal-success fade">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<i class="fa fa-check-circle"></i>
							</div>
							<div class="modal-title"  id="successMsg"></div>
							<div class="modal-footer">
								<button type="button" class="btn btn-success submitConfim" style="border-radius:0px;width:110px" onClick="window.location.reload();">OK</button>
							</div>
						</div> <!-- / .modal-content -->
					</div> <!-- / .modal-dialog -->
				</div>
				
				<div id="uidemo-modals-alerts-warning" class="modal modal-alert modal-warning fade">
				<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<i class="fa fa-warning"></i>
							</div>
							<div class="modal-title" id="warningMsg"></div>
							<div class="modal-footer">
								<button type="button" class="btn btn-warning submitConfim" style="border-radius:0px; width:110px;" onClick="$('#uidemo-modals-alerts-warning').modal('hide');">OK</button>
							</div>
						</div> <!-- / .modal-content -->
					</div> <!-- / .modal-dialog -->
				</div>
	
	           <div id="uidemo-modals-alerts-confirm" class="modal modal-alert modal-success fade">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<i class="fa fa-check-circle"></i>
							</div>
							<div class="modal-title">Are you sure to delete this Chapter?</div>
							<div class="modal-footer">
								<button type="button" id="confirmButton" class="btn btn-success submitConfim" style="border-radius:0px;width=110px;">Yes</button>
								<button type="button" class="btn btn-default" data-dismiss="modal" style="border-radius:0px;width:110px;" onClick="$('#uidemo-modals-alerts-confirm').modal('hide');">No</button>
							</div>
						</div> <!-- / .modal-content -->
					</div> <!-- / .modal-dialog -->
				</div>
	<script>
		function resetForm(){
			$('#chCountry').select2().val(null).trigger("change");
			$('#chCity').val("");
	        $('#chStates').val("");
		    $("#chapter").val("");
		    $("#chId").val("");
		}
		
	    function addUser(){
	    	resetForm();
	    	$('#myModal').modal('show'); 
	    }
	    
	    function closeDiv(){
	    	resetForm();
	    	$('#myModal').modal('hide')
	    }
	    
	    function deleteUser(){
	    	var r = $('#jq-datatables-example').DataTable().row('.selected');
	        if(r && r.data() && r.data().id && r.data().id != null){
	        	$('#uidemo-modals-alerts-confirm').modal('show');
	        }else{
	        	$('#warningMsg').html('No record selected!');
	        	$('#uidemo-modals-alerts-warning').modal('show');
	        }
	    	
	    }
	    
	    function editUser(){
	    	resetForm();
	    	var r = $('#jq-datatables-example').DataTable().row('.selected');
	        if(r && r.data() && r.data().id && r.data().id != null){
	        	$.ajax( {  
		    		  url:'<%=request.getContextPath()%>/user/getChapterInfo/'+r.data().id, 
		    		  data:{	    		       
		    		  },  
		    		  type:'post',  
		    		  cache:false,  
		    		  dataType:'json',  
		    		  success:function(data) {  
			    		          if(data.success =="Y" ){  
			    		        	  	$('#chCountry').select2().val(data.country).trigger("change");
			    		        	  	$('#chStates').val(data.states);
			    		        	  	$('#chCity').val(data.city);
								        $('#chapter').val(data.chapter);
								        $('#chId').val(data.id);
				    		  		  	$('#myModal').modal('show');
			    		          }else{  
			    		                $('#warningMsg').html(data.msg);
			    			        	$('#uidemo-modals-alerts-warning').modal('show');
			    		          }
		    		          },  
		    		          error : function() {  
		    		             alert("Error occurred！");  
		    		          }  
		        });
	        }else{
	        	$('#warningMsg').html('No record selected!');
	        	$('#uidemo-modals-alerts-warning').modal('show');
	        }
	        
	    };
		   function saveChapter(){
		    	$.ajax( {  
		    		   url:'<%=request.getContextPath()%>/user/saveChapter', 
		    		   data:{
		    		       country:$("#chCountry").val(),
		    		       states:$('#chStates').val(),
		    		       city:$("#chCity").val(),
		    		       chapter:$('#chapter').val(),
		    		       id:$('#chId').val()
		    		  },  
		    		  type:'post',  
		    		  cache:false,  
		    		  dataType:'json',  
		    		  success:function(data) {  
			    		          if(data.success =="Y" ){  
			    		        	  closeDiv();
			    		        	  $('#successMsg').html('Save the chapter successfully!');
			    		        	  $('#uidemo-modals-alerts-success').modal('show');
			    		          }else{ 
			    		        	  $('#warningMsg').html(data.msg);
			    		        	  $('#uidemo-modals-alerts-warning').modal('show');
			    		          }  
		    		          },  
		    		          error : function() {  
		    		        	  $('#warningMsg').html('Error occurred!');
		    		        	  $('#uidemo-modals-alerts-warning').modal('show');
		    		          }  
		         });
		    }
	    
		init.push(function () {		
			
			$("select:not(.unRender)").select2({
			    allowClear: true
			});
			
			window.dataTable = $('#jq-datatables-example').dataTable( {
				'sPaginationType' : 'full_numbers',
				'bProcessing' : true,
				'bServerSide' : true,
				'bDeferRender' : true,
				"sServerMethod" : "POST",
				"bLengthChange": false, //改变每页显示数据数量
				"bSort": false, //排序功能
				"bFilter": false,
				"iDisplayLength" : 20, 
				"ajax": {
				    "url": '${pageContext.request.contextPath}/user/getChapterListJson',
				    "data": function ( d ) {
 				       d.chapter = $('#s_chapter').val();
					}
				},
				'aoColumnDefs' : [
				                  {aTargets : [ '_all' ], sDefaultContent : '&nbsp;'},
				                  {aTargets : [ 0 ], mData : 'country'},
				                  {aTargets : [ 1 ], mData : 'states'},
				                  {aTargets : [ 2 ], mData : 'city'},
				                  {aTargets : [ 3 ], mData : 'chapter'},
				                  ],
				 'fnInitComplete' : function(){
					 $('#jq-datatables-example tbody').on('click', 'tr', function () {
				        if ($(this).hasClass('selected') ) {
				            $(this).removeClass('selected');
				        }
				        else {
				        	$('#jq-datatables-example').DataTable().$('tr.selected').removeClass('selected');
				            $(this).addClass('selected');
				        }
				        
				    });
				 }
	
			} ); 
	      
	      $('#searchBtn').click(function(){
				var settings = window.dataTable.fnSettings();
				settings._iDisplayStart = 0;
				window.dataTable.fnDraw();
	      });
	      
	      $("#searchIcon").click(function(){  
				if($("#searchAreaDiv").is(":hidden")){
					$("#searchAreaDiv1").show();
					$("#searchAreaDiv").show();
					}else{
						$("#searchAreaDiv1").hide();
						$("#searchAreaDiv").hide();
					}
					
		      }); 
			
			$("document").ready(function(){
				$("#searchAreaDiv1").hide();
				$("#searchAreaDiv").hide();
				});
			
	      $('#confirmButton').click(function(){
	    	  $('#uidemo-modals-alerts-confirm').modal('hide');
	    	  var r = $('#jq-datatables-example').DataTable().row('.selected');
	    	  $.ajax( {  
	      		  url:'${pageContext.request.contextPath}/user/deleteChapter', 
	      		  data:{
	      			  chapterId:r.data().id	    		       
	      		  },  
	      		  type:'post',  
	      		  cache:false,  
	      		  dataType:'json',  
	      		  success:function(data) {  
	    	    		          if(data.success =="Y" ){
	    	    		               $('#successMsg').html('Chapter deleted successfully!');
	    		    		           $('#uidemo-modals-alerts-success').modal('show');
	    	    		          }else{  
	    	    		        	  $('#warningMsg').html(data.msg);
	    	    		        	  $('#uidemo-modals-alerts-warning').modal('show');
	    	    		          }  
	      		          },  
	      		          error : function() {  
	      		        	  $('#warningMsg').html('Error occurred!');
	      			        	$('#uidemo-modals-alerts-warning').modal('show');
	      		          }  
	              });
	      });
	      
		});
  
	</script>
